<script setup lang="ts">
import { useDetail } from "@/views/user/utils/hooks";
import { reactive, ref } from "vue";
import { message } from "@/utils/message";
import {
  getUserHouseListByUserId,
  getUserInfo,
  getUserRole,
  getUserShopsListByUserId,
  setUserPasswordByUserId
} from "@/api/user";
import { ElMessageBox, TabsPaneContext } from "element-plus";
import { ChangeProperty, ChangeRole, getPropertyList } from "@/api/community";

defineOptions({
  name: "userInfo"
});

const { initToDetail, getParameter } = useDetail();
initToDetail("params");
const form = reactive({
  propertyId:null,
  propertyList: null
})
const data = ref({});
const role = ref([]);
//房产响应数据
const house = ref([]);
//商铺响应数据
const shops = ref([]);
//车位响应数据
const cars = ref([]);
const roleB = ref(false);
const changeRole = ref(false);
const changeProperty = ref(false);
const roles = ref([]);

async function getInfo() {
  getUserInfo(getParameter.id)
    .then(res => {
      if (res.code === 200) {
        data.value = res.data;
        console.log(data.value);
      } else {
        message(res.msg, { type: "error" });
      }
    })
    .finally(() => {
      getUserRoleInfo();
    });
}

function getUserRoleInfo() {
  getUserRole(data.value.id).then(res => {
    if (res.code === 200) {
      role.value = res.data;
      console.log(role.value.length);
      for (let i = 0; i < role.value.length; i++) {
        if (role.value[i].id === 2) {
          roleB.value = true;
          console.log(roleB.value);
          return;
        }
      }
      roleB.value = false;
    } else {
      message(res.msg, { type: "error" });
    }
  });
}

/**
 * 重置密码
 */
const rePassword = () => {
  ElMessageBox.confirm("确认重置密码吗？", "警告", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "info"
  }).then(() => {
    //重置密码逻辑
    setUserPasswordByUserId(data.value.id).then(res => {
      message(res.msg, { type: "success" });
    });
  });
};
//重置角色
const changeRoles = () => {
  ChangeRole({ userId: data.value.id, ids: roles.value }).then(res => {
    getInfo();
  });
};
//分配物业
const changePropertys = () => {
  ChangeProperty({ userId: data.value.id, id: form.propertyId }).then(res => {
    getInfo();
  });
};
const getProperty = () => {
  getPropertyList(1,"").then(res => {
    form.propertyList = res.data.records;
  });
};
getInfo();

/** 处理选项卡 */
//选项卡的选中项
const activeName = ref();
//监听选项卡切换 加载最新数据
const handleClick = (tab: TabsPaneContext, event: Event) => {
  if (tab.props.label === "房产") {
    getUserHouseListByUserId(getParameter.id).then(res => {
      house.value = res.data;
    });
  } else if (tab.props.label === "商铺") {
    getUserShopsListByUserId(getParameter.id).then(res => {
      shops.value = res.data;
    });
  }

  console.log(tab.props.label, event);
};
</script>

<template>
  <div>
    <h1 style="text-align: center; padding-bottom: 10px">
      住户【{{ data.username }}】-详细信息
    </h1>
    <el-descriptions direction="vertical" :column="4" size="large" border>
      <el-descriptions-item label="用户ID">{{ data.id }}</el-descriptions-item>
      <el-descriptions-item label="用户名">
        {{ data.username }}
      </el-descriptions-item>
      <el-descriptions-item label="真实姓名" :span="2"
      >{{ data.ownerName }}
      </el-descriptions-item>
      <el-descriptions-item label="联系电话"
      >{{ data.phone }}
      </el-descriptions-item>
      <el-descriptions-item label="身份证号"
      >{{ data.ownerIdCard }}
      </el-descriptions-item>
      <el-descriptions-item label="操作">

        <el-button type="primary" @click="rePassword()">重置密码</el-button>
        <el-button type="primary" @click="changeRole=true">配置权限</el-button>
        <el-button type="primary" v-if="roleB" @click="getProperty();changeProperty=true">配置物业</el-button>
      </el-descriptions-item>
    </el-descriptions>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="房产" name="first">
        <el-table :data="house.records" table-layout="fixed">
          <el-table-column prop="id" label="ID" />
          <el-table-column prop="residentialId" label="小区ID" />
          <el-table-column label="面积">
            <template v-slot="scope">
              <el-tag type="success">{{ scope.row.area }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="houseNumber" label="楼号" />
          <el-table-column prop="unitNumber" label="单元号" />
          <el-table-column prop="roomNumber" label="房间号" />
          <el-table-column prop="deliveryTime" label="交付时间" />
          <el-table-column label="操作">
            <template v-slot="scope">
              <el-button
                type="primary"
                size="small"
                @click="toDetail({ id: scope.row.id }, 'params')"
              >详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="商铺" name="second">
        <el-table :data="shops.records" table-layout="fixed">
          <el-table-column prop="id" label="ID" />
          <el-table-column prop="residentialId" label="小区ID" />
          <el-table-column prop="address" label="商铺地址" />
          <el-table-column prop="name" label="商铺名" />
          <el-table-column label="商铺面积">
            <template v-slot="scope">
              <el-tag type="success">{{ scope.row.area }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="scope">
              <el-button
                type="primary"
                size="small"
                @click="toDetail({ id: scope.row.id }, 'params')"
              >详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="车位" name="third">
        <el-table :data="cars.records" table-layout="fixed">
          <el-table-column prop="id" label="ID" />
          <el-table-column prop="username" label="用户名" />
          <el-table-column prop="ownerName" label="姓名" />
          <el-table-column prop="ownerIdCard" label="身份证号" />
          <el-table-column prop="phone" label="联系方式" />
          <el-table-column label="操作">
            <template v-slot="scope">
              <el-button
                type="primary"
                size="small"
                @click="toDetail({ id: scope.row.id }, 'params')"
              >详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <div>
      <el-dialog v-model="changeRole" title="配置权限" width="500" center>
        <el-checkbox-group v-model="roles">
          <el-checkbox value="1" label="1">社区</el-checkbox>
          <el-checkbox value="2" label="2">物业</el-checkbox>
          <el-checkbox value="3" label="3">业主</el-checkbox>
        </el-checkbox-group>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="changeRole = false">取消</el-button>
            <el-button type="primary"
                       @click="changeRoles();changeRole = false">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
    <!--    分配物业-->
    <div>
      <el-dialog v-model="changeProperty" title="配置物业" width="500" center>
          <el-select
            allow-create
            filterable
            v-model="form.propertyId"
            placeholder="选择物业"
          >
            <el-option
              v-for="item in form.propertyList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="changeProperty = false">取消</el-button>
            <el-button type="primary"
                       @click="changePropertys();changeProperty = false">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<style scoped lang="scss"></style>
